<template name="directory">
	<section class="directory">
		{{> header sectionName="Directory" hideHelp=true fullpage=true}}
		<div class="rc-table-content">
			{{>tabs tabs=tabsData}}

			<form class="directory__search-form js-search-form" role="form">
				<div class="rc-input">
					<div class="rc-input__icon">
						{{#if isLoading}}
							{{> loading }}
						{{else}}
							{{> icon block="rc-input__icon-svg" icon="magnifier" }}
						{{/if}}
					</div>
					<input
						type="text"
						class="rc-input__element js-search"
						name="message-search"
						id="message-search"
						placeholder="{{#if $eq searchType 'channels'}}{{_ "Search_Channels"}}{{/if}}{{#if $eq searchType 'users'}}{{_ "Search_Users"}}{{/if}}"
						autocomplete="off">
				</div>
				{{#if $eq searchType 'users'}}
					{{#if federationEnabled}}
						<label class="rc-select">
							<select class="rc-select__element js-workspace" name="search-type">
								<option class="rc-select__option" value="local" selected="true">{{_ "Local_Domains"}}</option>
								<option class="rc-select__option" value="external">{{_ "External_Domains"}}</option>
							</select>
							{{> icon block="rc-select__arrow" icon="arrow-down" }}
						</label>
					{{/if}}
				{{/if}}
			</form>

			{{#if $eq searchType 'channels'}}
				{{#table fixed='true' onItemClick=onTableItemClick onScroll=onTableScroll onResize=onTableResize onSort=onTableSort}}
					<thead>
						<tr>
							<th class="directory__channel-name js-sort {{#if searchSortBy 'name'}}is-sorting{{/if}}" data-sort="name">
								<div class="table-fake-th"><span>{{_ "Name"}}</span> {{> icon icon=(sortIcon 'name')}}</div>
							</th>
							<th class="directory__user-count js-sort {{#if searchSortBy 'usersCount'}}is-sorting{{/if}}" data-sort="usersCount">
								<div class="table-fake-th"><span>{{_ "Users"}}</span> {{> icon icon=(sortIcon 'usersCount')}}</div>
							</th>
							{{#if showLastMessage}}
							<th class="table-column-date">
								<div class="table-fake-th">{{_ "Last_Message"}}</div>
							</th>
							{{/if}}
							<th class="js-sort table-column-date {{#if searchSortBy 'createdAt'}}is-sorting{{/if}}" data-sort="createdAt">
								<div class="table-fake-th"><span>{{_ "Created_at"}}</span> {{> icon icon=(sortIcon 'createdAt') }}</div>
							</th>
							<th>
								<div class="table-fake-th"><span>{{_ "Topic"}}</span></div>
							</th>
						</tr>
					</thead>
					<tbody>
						{{#each searchResults}}
							<tr data-name="{{name}}">
								<td>
									<div class="rc-table-wrapper">
										<div class="rc-table-avatar">{{> avatar username=name roomIcon="true"}}</div>
										<div class="rc-table-info">
											<span class="rc-table-title">
												{{>icon icon="hashtag" block="rc-table-icon"}}
												{{name}}
											</span>
										</div>
									</div>
								</td>
								<td>{{users}}</td>
								{{#if showLastMessage}}
									<td class="table-column-date">{{lastMessage}}</td>
								{{/if}}
								<td class="table-column-date">{{createdAt}}</td>
								<td>{{topic}}</td>
							</tr>
						{{else}}
							{{# with searchText}}
								<tr class="table-no-click">
									<td colspan="{{sumColumnCount 4 showLastMessage}}">
										{{_ "No_results_found_for"}} {{.}}
									</td>
								</tr>
							{{/with}}
						{{/each}}
						{{#if isLoading}}
							<tr class="table-no-click">
								<td class="table-loading-td" colspan="{{sumColumnCount 4 showLastMessage}}">
									{{> loading}}
								</td>
							</tr>
						{{/if}}
					</tbody>
				{{/table}}
			{{/if}}
			{{#if $eq searchType 'users'}}
				{{#table onItemClick=onTableItemClick onScroll=onTableScroll onResize=onTableResize onSort=onTableSort}}
					<thead>
						<tr>
							<th class="directory__user-name js-sort {{#if searchSortBy 'name'}}is-sorting{{/if}}" data-sort="name">
								<div class="table-fake-th"><span>{{_ "Name"}}</span> {{> icon icon=(sortIcon 'name') }}</div>
							</th>
							<th class="directory__username js-sort {{#if searchSortBy 'username'}}is-sorting{{/if}}" data-sort="username">
								<div class="table-fake-th"><span>{{_ "Username"}}</span> {{> icon icon=(sortIcon 'username') }}</div>
							</th>
							{{#if canViewOtherUserInfo}}
							<th class="directory__email js-sort {{#if searchSortBy 'email'}}is-sorting{{/if}}" data-sort="email">
								<div class="table-fake-th"><span>{{_ "Email"}}</span> {{> icon icon=(sortIcon 'email') }}</div>
							</th>
							{{/if}}
							{{#if $eq searchWorkspace 'external'}}
							<th class="directory__origin js-sort {{#if searchSortBy 'origin'}}is-sorting{{/if}}" data-sort="origin">
								<div class="table-fake-th"><span>{{_ "Domain"}}</span> {{> icon icon=(sortIcon 'origin') }}</div>
							</th>
							{{/if}}
							{{#if $eq searchWorkspace 'local'}}
							<th class="table-column-date js-sort {{#if searchSortBy 'createdAt'}}is-sorting{{/if}}" data-sort="createdAt">
								<div class="table-fake-th"><span>{{_ "Created_at"}}</span> {{> icon icon=(sortIcon 'createdAt') }}</div>
							</th>
							{{/if}}
						</tr>
					</thead>
					<tbody>
						{{#each searchResults}}
							<tr data-name="{{name}}">
								<td>
									<div class="rc-table-wrapper">
										<div class="rc-table-avatar">{{> avatar username=username}}</div>
										<div class="rc-table-info">
											<span class="rc-table-title">
												{{name}}
											</span>
										</div>
									</div>
								</td>
								<td>{{username}}</td>
								{{#if canViewOtherUserInfo}}
								<td>{{email}}</td>
								{{/if}}
								{{#if $eq searchWorkspace 'external'}}
								<td>{{domain}}</td>
								{{/if}}
								{{#if $eq searchWorkspace 'local'}}
								<td>{{createdAt}}</td>
								{{/if}}
							</tr>
						{{else}}
							{{# with searchText}}
								<tr class="table-no-click">
									<td colspan="{{sumColumnCount 3 (canViewOtherUserInfo) ($eq searchWorkspace 'external')}}">
										{{_ "No_results_found_for"}} {{.}}
									</td>
								</tr>
							{{/with}}
						{{/each}}
						{{#if isLoading}}
							<tr class="table-no-click">
								<td class="table-loading-td"
									colspan="{{sumColumnCount 3 (canViewOtherUserInfo) ($eq searchWorkspace 'external')}}">
									{{> loading}}
								</td>
							</tr>
						{{/if}}
					</tbody>
				{{/table}}
			{{/if}}
		</div>
	</section>
</template>
